<form [formGroup]="form">
  <h4>mat-select</h4>
  <mat-form-field>
    <mat-label>Favorite Food</mat-label>
    <mat-select [formControl]="foodControl" name="food">
      <mat-option>None</mat-option>
      @for (food of foods; track food) {
        <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
      }
    </mat-select>
  </mat-form-field>
  <p>Selected: {{foodControl.value}}</p>
  <h4>Native select</h4>
  <mat-form-field>
    <mat-label>Favorite Car</mat-label>
    <select matNativeControl [formControl]="carControl" name="car">
      <option value="">None</option>
      @for (car of cars; track car) {
        <option [value]="car.value">{{car.viewValue}}</option>
      }
    </select>
  </mat-form-field>
  <p>Selected: {{carControl.value}}</p>
</form>
